<template>
    <div class="nu">
        <div ref="main" style="width: 500px;height:400px;"></div>
    </div>
</template>

<script>
    import * as echarts from 'echarts';
    export default {
        props: ['pricedata'],
        data() {
            return {
            }
        },
        mounted() {
            this.reflogmess();
        },
        watch: {
            pricedata: {
                deep: true,
                handler() {
                    this.reflogmess();
                }
            }
        },
        methods: {
            reflogmess() {
                var myChart = echarts.init(this.$refs.main);
                myChart.setOption({
                    title: {
                        text: '教师总收益/听课人数'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: ['0~50', '50~100', '100~150', '150~200', '200~250', '250~300'],
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]

                    },
                    series: [{
                        name: '总收益',
                        type: 'bar',
                        color: "green",
                        stack: 'Total',
                        data: this.pricedata
                    }]
                });


            }
        }
    }
</script>

<style scoped>
</style>